import React from 'react';
import { Button, Card, Col, Row } from 'antd';
import { useTranslation } from 'react-i18next';
import { useHistory } from 'react-router-dom';
import HeadBanger from '../../components/HeadBanger';

/// a simple landing page`
export default function IndexPage() {
	const { t } = useTranslation();
	const history = useHistory();

	const onButtonPressed = () => {
		history.push('/login');
	};

	return (
		<>
			<HeadBanger />
			<Row gutter={[32, 32]} className={'headbang'}>
				<Col lg={6} md={6} sm={12} xs={12} />
				<Col lg={12} md={12} sm={24} xs={24}>
					<Card title={t("title-landing-welcome")}>
						<Button onClick={onButtonPressed}>{t('button-landing-login')}</Button>
					</Card>
				</Col>
				<Col lg={6} md={6} sm={12} xs={12} />
			</Row>
		</>
	);
}
